<!-- 商品详情-主题 -->
<template>
    <layout-pane label="主题">
        <div class="theme-wrap">
            <div class="theme-item" @click="onSelectTheme('#ec612a,#f7c747,#ff6347')">
                <div class="theme-color" style="background: #ec612a;"></div>
                <div class="theme-color" style="background: #f7c747;"></div>
                <div class="theme-color" style="background: #ff6347;"></div>
            </div>

            <div class="theme-item" @click="onSelectTheme('#f40600,#ffa800,#f40600')">
                <div class="theme-color" style="background: #f40600;"></div>
                <div class="theme-color" style="background: #ffa800;"></div>
                <div class="theme-color" style="background: #f40600;"></div>
            </div>
        </div>
    </layout-pane>

    <el-divider></el-divider>
    <layout-pane label="颜色">
        <div class="row-item">
            <si-color-picker
                v-model="primaryColor"
                label="颜色一"
                show-alpha
            />
            <si-color-picker
                v-model="secondaryColor"
                label="颜色二"
                show-alpha
            />
        </div>
        <div class="row-item">
            <si-color-picker
                v-model="tertiaryColor"
                label="颜色三"
                show-alpha
            />
        </div>
    </layout-pane>
</template>

<script>
import { defineComponent, toRefs, computed } from 'vue'
import LayoutPane from '@/components/setting-pane/layout-pane'
import { SiColorPicker } from '@/components/setting-pane/setting-item'
export default defineComponent({
    name: 'GoodsDetailTheme',
    components: {
        LayoutPane,
        SiColorPicker
    },
    props: {
        element: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const { element } = toRefs(props)

        const primaryColor = computed({
            get: () => element.value.customFeature.theme.primaryColor,
            set: val => element.value.customFeature.theme.primaryColor = val
        })

        const secondaryColor = computed({
            get: () => element.value.customFeature.theme.secondaryColor,
            set: val => element.value.customFeature.theme.secondaryColor = val
        })

        const tertiaryColor = computed({
            get: () => element.value.customFeature.theme.tertiaryColor,
            set: val => element.value.customFeature.theme.tertiaryColor = val
        })

        const onSelectTheme = data => {
            const [color1, color2, color3] = data.split(',')
            primaryColor.value = color1
            secondaryColor.value = color2
            tertiaryColor.value = color3
        }

        return {
            element,
            primaryColor,
            secondaryColor,
            tertiaryColor,

            onSelectTheme
        }
    }
})
</script>

<style lang="less" scoped>
.theme-wrap {
    display: inline-flex;
    align-items: center;
    height: 32px;
    .theme-item {
        display: inline-flex;
        align-items: center;
        width: 50px;
        height: 100%;
        border-radius: 2px;
        overflow: hidden;
        box-sizing: border-box;
        cursor: pointer;
        & + .theme-item {
            margin-left: 20px;
        }
        .theme-color {
            flex: 1;
            height: 100%;
        }
    }
}
.row-item {
    & + .row-item {
        margin-top: 10px;
    }
}
</style>